
<div id='comments'>

        <fieldset id='comments'>
            <legend>
            <strong>
              {{entry.comments.count}} Responses
            </strong>
             </legend>
             <br />

		{% for comment in comments %}

        <fieldset class='comment' id='comment-{{comment.key.id}}'>
            <legend> {%if comment.weburl %}
			<a href="{{comment.weburl}}" target="_blank" rel="nofollow">{{comment.author}}</a>
			{% else %}{{comment.author}}{%endif%} writes: </legend>

            <div style="float:right;">
                <small class='capsule'>
                <a href="#comment-{{comment.key.id}}" style="color:white;">
                    {{comment.date|datetz:"Y-m-d"}} at {{comment.date|datetz:"H:i"}}</a>
                </small>
            </div>

			<div class="gravatar"><img height="50" width="50" class="avatar" src="{{comment.gravatar_url}}" alt=""/>
			</div>

            <div class='commenttext'>
            {{comment.content}}
            </div>
            
            {% if entry.allow_comment %}
            <div class='postmetadata replybuttonbox'>
                &nbsp; &nbsp;
                 <span class="capsule actbubble">&nbsp;
                 <a onclick="return backcomment('<a href=#comment-{{comment.key.id}}>{{comment.author}}</a>');" href="#responsebox">Reply</a> &nbsp;
                 </span>
            </div>
            {% endif %}
   
        </fieldset>

{% endfor %}

            <div id='ajax'></div>
            <div id="alert" class="alert">Submitting...</div>

{% if comments_nav.nav %}
<div  class='comment_nav'>
{{comments_nav.nav}}
</div>
{% endif %}


{% if entry.allow_comment %}

    <div id='respond'>

    <fieldset id='responsebox'>

    <legend>Leave a Reply</legend>

<form action="/post_comment" method="post" id="commentform">

<p><input type="text" name="author" id="author" value="{{user_name}}" size="22" tabindex="1" />
<label for="author"><span class="capsule rem">Name ( <span style='color:red;'>*</span>Required )</span></label></p>

<p><input type="text" name="email" id="email" value="{{user_email}}" size="22" tabindex="2" />
<label for="email"><span class="capsule rem">Email (<span style='color:red;'/>*</span>Required. Will not be published)</span></label></p>

<p><input type="text" name="url" id="url" value="{{user_url}}" size="22" tabindex="3" />
<label for="url"><span class="capsule rem">Website</span></label></p>

<p id="checkarea"><span style="color:#D50000" id="disp_check">{{checknum1}}+{{checknum2}}=</span>
<input type="hidden" name="checknum" id="checknum" value="{{checknum1}}+{{checknum2}}" />
<input type="text" name="checkret" id="checkret" value="" size="5" tabindex="4" /><span style='color:red;'>* &nbsp;</span>
</p>

<script type="text/javascript">edToolbar('comment');</script>
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="5" ></textarea></p>

<p><input name="submit" type="submit" id="submit" class='capsule actbubble' tabindex="5" value="Submit (Ctrl+Enter)"  style="padding-left: 15px; padding-right: 15px;" />
<input type="hidden" name="key" value="{{entry.key}}" />
<script type="text/javascript">document.write("<input type='hidden'name='useajax' value='1' />")</script>
<noscript><input type="hidden" name="useajax" value="0" /></noscript>
</p>                          

</form>
</fieldset>

<script type="text/javascript">
<!--//
    loadjs=false;
    
         //quiksubmit
    document.getElementById("comment").onkeydown = function (moz_ev)
{
var ev = null;
if (window.event){
        ev = window.event;
    }else{
        ev = moz_ev;
    }
if (ev != null && ev.ctrlKey && ev.keyCode == 13)
    {
        document.getElementById("submit").click();
    }
}
    //end

    
    //quikreply
    function backcomment(msg)
    {
        backdb=document.getElementById('comment');
        backdb.focus();
        backdb.value="@"+msg+', ';
        return false;
        //return true; 
    }
    //end

    commentuser=$.cookie('comment_user');
    if (commentuser)
    {
        //[user,email,url]=commentuser.split('#@#');
        var tuple=commentuser.split('#@#');
        var user,email,url;
        user=tuple[0];
        email=tuple[1];
        url=tuple[2];
        $('#author').val(user);
        $('#email').val(email);
        $('#url').val(url);

        $('#checkarea').hide();
        
    }
    else
    {
        num1=Math.round(Math.random()*10);
        num2=Math.round(Math.random()*10);
        $('#checkarea #checknum').val(num1+'+'+num2);
        $('#checkarea #disp_check').text(num1+'+'+num2+'=');
        $('#checkarea').show();
    }

    function showinfo(msg)
    {
        alert(msg);
    }

    function add_comment(msg)
    {
        comment=$(msg)
        if (!loadjs)
        {
            $("#ajax").append(comment).show();
            $.getScript("/themes/{{ blog.theme_name }}/js/jquery.color.js", function(){
                comment.animate( { backgroundColor: '#dd6f06' }, "slow")
                .animate( { backgroundColor: 'white' }, "slow")
                loadjs=true;
            });
        }else
        {
            $("#ajax").append(comment);
            comment.animate( { backgroundColor: '#dd6f06' }, "slow")
            .animate( { backgroundColor: 'white' }, "slow")

        }
    }

    $('#commentform').ajaxForm({
        type:'post',
        dataType:  'json',
        beforeSubmit:function(formData,jqForm,options){
            var form = jqForm[0];
            if (form.author)
            {

                if (!form.author.value)
                {
                    showinfo('Your name please!');
                    form.author.focus();
                    return false;
                }
                if (!form.email.value)
                {
                    showinfo('Your email address please!');
                    form.email.focus();
                    return false;
                }
            }
            if ($('#checkarea').css('display')!='none')
            {
                if(eval(form.checknum.value)!=form.checkret.value)
                {
                    alert('Check code error!');
                    form.checkret.value='';
                    form.checkret.focus();
                    return false;
                }
            }
            
            if (!form.comment.value)
            {
                showinfo('Please leave me some message!');
                form.comment.focus();
                return false;
            }

            $('#alert').text('Submitting...').show();

            return true;

        },
        success:function(data){
            if (data[0])
            {
                /*document.cookie=data[2];*/
                add_comment(data[1]);
                $('#alert').text('Your comment has been submitted successfully!');
                $('#comment').val('');
            }
            else if (data[1]==-102)
            {
                showinfo('Check code error!');
                $('#alert').text('Failed to submit your comment!');
                $('#checkret').focus();
            }
            else if (data[1]==-101)
            {
                showinfo(data[2]);
                $('#alert').text('Failed to submit your comment!');
            }
        }
    });
//-->
</script>

{% else %}
 <div class='capsule nocomments'>
            Comments are closed
 </div>
{% endif %}